<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>入庫單</span>
      </div>
      <el-form v-if="form.depot" ref="form" :model="form" label-width="auto">
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库: ">
              <div>{{ form.depot.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库类型: ">
              <div>{{ dict.label.inBillType[form.inType] }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="採購單號: ">
              <div>{{ form.sourceNo }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库时间: ">
              <div>{{ form.inTime }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付款狀態: ">
              <div>{{ dict.label.stockPaymentStatus[form.paymentStatus] }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="備註: ">
              <div>{{ form.remark }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入庫單金額: ">
              <div>{{ form.fillAmount }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折扣率:">
              <div>{{ form.discountRate }}%</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校驗誤差值:">
              <div>{{ form.otherFee }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入庫總數:">
              <div>{{ form.sumQuantity }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="實時金額:">
              <div>{{ form.amount }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否審核:">
              <div>{{ dict.label.true_false[form.audit] }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>入庫商品明細</span>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="400px"
        stripe
      >
        <el-table-column
          label="产品名"
          width="200px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.product.nameCn }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sku"
          label="商品編號"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.product.sku }}</span></template>
        </el-table-column>
        <el-table-column
          prop="upc"
          label="條形碼"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.product.upc }}</span></template>
        </el-table-column>
        <el-table-column
          prop="surplusQuantity"
          label="剩余庫存"
        >
          <template slot-scope="scope">
            {{ scope.row.surplusQuantity }}
          </template>
        </el-table-column>

        <el-table-column
          prop="originalPrice"
          label="Price"
          align="right"
        >
          <template slot-scope="scope">
            {{ scope.row.originalPrice }}
          </template>
        </el-table-column>

        <el-table-column
          prop="originalPrice"
          label="PR"
          align="right"
        >
          <template slot-scope="scope">
            {{ scope.row.pr }}
          </template>
        </el-table-column>

        <el-table-column
          prop="quantity"
          label="數量"
          align="right"
        >
          <template slot-scope="scope">
            <div> {{ scope.row.quantity }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="price"
          label="單件成本價"
          align="right"
        >
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>

        <el-table-column
          prop="inUnitQuantity"
          label="單位數量"
          align="right"
        >
          <template slot-scope="scope">
            <div> {{ scope.row.product.inUnitQuantity }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="expireDate"
          label="過期時間"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.expireDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="earlyWarningDate"
          label="預警時間"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.earlyWarningDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="備註"
        >
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import depotApi from '@/api/wms/depot'
import Vue from 'vue'
import router from '@/router/routers'
import store from '@/store'
import { mapGetters } from 'vuex'
import { all } from '@/api/wms/depotBillIn'

const defualutFrom = {
  paymentStatus: '',
  description: '',
  createTime: '',
  vendorId: '',
  sourceNo: '',
  sourceId: '',
  sumQuantity: '',
  inType: '',
  id: '',
  inTime: '',
  depotId: '',
  discountRate: 0,
  shipping: 0,
  otherFee: 0,
  amount: 0,
  fillAmount: 0,
  depotBillInItems: []
}
export default {
  name: 'InBillDetails',
  dicts: ['inBillType', 'depotType', 'stockPaymentStatus', 'true_false'],
  props: {
    model: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      tableData: [],
      vendorOptions: [],
      newArr: [],
      arrId: [],
      list: [],
      loading: false,
      form: Object.assign({}, defualutFrom),
      tempRoute: {},
      defaultNumber: ''
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  activated() {
    this.echoFun()
  },
  mounted() {
    depotApi.getAll().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        this.list.push({ label: res.data[i].name, value: res.data[i].id })
      }
    })
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.vendorOptions = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.vendorOptions = []
      }
    },
    setTitle(title) {
      Vue.nextTick(() => {
        const routeTitle = Object.assign(Object.assign({}, router.currentRoute), { title })
        store.dispatch('tagsView/updateVisitedView', routeTitle)
        document.title = title
      })
    },
    echoFun() {
      this.defaultNumber = this.$route.query.defaultNumber
      all({ defaultNumber: this.defaultNumber }).then(res => {
        if (res.code === 0) {
          this.form = res.data[0]
          this.tableData = this.form.depotBillInItems
          this.tableData.map((item) => {
            item.originalPrice = !item.product.price && item.product.price !== 0 ? item.product.originalPrice : item.product.price
            const pr = (item.originalPrice - item.price) / item.price
            item.pr = Math.round(pr * 10000) / 100 + '%'
            return item
          })
          this.setTitle('入庫单編號' + this.form.defaultNumber)
        }
      })
    }
  }
}
</script>

<style>
.productInfo span {
  display: block;
  line-height: 16px;
}
</style>
